<template>
  <div class="container">
          <el-row class="head">
            <el-col :span="8">
                <div class="">{{company?company:this.$store.state.company}}</div>
                </el-col>
            <el-col :span="8">
                <h2>
                    工作人员去向统计图
                </h2>
            </el-col>
            <el-col :span="8">
                <div>
                    日期：{{date}}
                </div>
            <div v-if="this.$store.state.name?this.$store.state.name:name" class="name-ico">
                <el-dropdown>
                    <span class="el-dropdown-link">
                    {{name?name:this.$store.state.name}}<i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item ><router-link tag="span" to="/ResetPassword"  class="spanbox">修改密码</router-link></el-dropdown-item>
                    <el-dropdown-item ><span @click="Signout" class="spanbox" >退出登录</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                 <router-link tag="a" to="/State" class="iconfont icon-suoxiao icon"></router-link>
          </div>
               
            </el-col>
             <div class="mask"></div> 
        </el-row> 

        <el-row class="statistical-data">
            <el-col :span="4">
                <div class="statistical-data-people c01BF5B">
                    <h2>{{total.total}}</h2>
                    <p>总人数</p>
                    <i class="iconfont icon-tuandui"></i>
                </div>
            </el-col>

            <el-col :span="4">
                <div class="statistical-data-people c0076FB">
                    <h2>{{total.onwork}}</h2>
                    <p>在岗人数</p>
                    <i class="iconfont icon-gongzuo"></i>
                </div>
            </el-col>

            <el-col :span="4">
               <div class="statistical-data-people c00BDB5">
                    <h2>{{total.meeting}}</h2>
                    <p>开会人数</p>
                    <i class="iconfont icon-huiyikaihuitaolun"></i>
                </div>
            </el-col>

            <el-col :span="4">
                <div class="statistical-data-people cFFC01B">
                    <h2>{{total.trip}}</h2>
                    <p>公差人数</p>
                    <i class="iconfont icon-feiji800"></i>
                </div>
            </el-col>

            <el-col :span="4" >
               <div class="statistical-data-people cFF2044">
                    <h2>{{total.ofwork}}</h2>
                    <p>请假人数</p>
                     <i class="iconfont icon-qingjia"></i>
                </div>
            </el-col>

            
            <el-col :span="4" >
               <div class="statistical-data-people c956AFF">
                    <h2>{{total.holiday}}</h2>
                    <p>休假人数</p>
                    <i class="iconfont icon-xiuxiancanyinyulexiawuchakafeibeizishui"></i>
                </div>
            </el-col>
        </el-row>

        <el-row v-if="listsOne">
            <el-col :span="11" :push="1">
               <statisfomr :page='1'></statisfomr>
            </el-col>

            <el-col :span="11" :offset="1">
               <statisfomr :page='2'></statisfomr>
            </el-col>

             
        </el-row>
        <el-row v-else>
            <p class="zwsj">暂无数据</p>
        </el-row>

        <el-row class="footer">
            <el-col :span="2" :offset="6">   
                <div class="footer-text">
                    <span class="b01BF5B"></span>
                    <p>总人数</p>
                </div>
            </el-col>

            <el-col :span="2">   
                <div class="footer-text">
                    <span class="b0076FB"></span>
                    <p>在岗</p>
                </div>
            </el-col>

            <el-col :span="2">   
                <div class="footer-text">
                    <span class="b00BDB5"></span>
                    <p>开会</p>
                </div>
            </el-col>

            <el-col :span="2">   
                <div class="footer-text">
                    <span class="bFFC01B"></span>
                    <p>公差</p>
                </div>
            </el-col>

            <el-col :span="2">   
                <div class="footer-text">
                    <span class="bFF2044"></span>
                    <p>请假</p>
                </div>
            </el-col>

            <el-col :span="2">   
                <div class="footer-text">
                    <span class="b956AFF"></span>
                    <p>休假</p>
                </div>
            </el-col>
        </el-row>
  </div>
</template>

<script>
import moment from "moment/moment";
import statisfomr from './statisticsfomr'
import { lists, total } from "../../api/api";
export default {
  data() {
    return {
      name: sessionStorage.getItem("name"),
      company: sessionStorage.getItem("company"),
      date: moment(new Date()).format("YYYY-MM-DD"),
      listsOne: [],
      total: {}
    };
  },
  created() {
    this.getlists();
    this.gettotal();
  },
  methods: {
    getlists() {
      lists().then(res => {
        this.listsOne = res.data.data;
      });
    },
    gettotal() {
      total().then(res => {
        this.total = res.data;
        // console.log(res, 1111);
      });
    },
    //   退出
    Signout() {
      this.name = "";
      this.company = "";
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("company");
      sessionStorage.removeItem("name");
      this.$router.push({ path: "/login" });
    },
    
  },
  components:{
    statisfomr  
  }
};
</script>



<style lang="scss" scoped>
body {
	margin: 0px;
	padding: 0px;
	/*background: url(assets/bg1.jpg) center !important;
		background-size: cover;*/
	// background: #1F2D3D;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
.statistical-form .tr:nth-of-type(odd) {
  background-color: #e5f1ff;
}
.container {
  background-color: #ffffff;
  overflow: hidden;
}
.head {
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  background-color: #0076fb;
  position: relative;
  z-index: 88888;
  margin-bottom: 50px;
  .name-ico {
    position: absolute;
    top: 0px;
    right: 30px;
    font-size: 30px;
    color: #fff;
    .el-dropdown {
      font-size: 14px;
      color: #fff;
    }
    .icon {
      position: absolute;
      left: -50px;
      top: 2px;
      font-size: 25px;
      color: #fff;
      text-decoration: none;
    }
  }
  .mask {
    width: 30%;
    height: 0;
    border-top: 40px solid #0076fb;
    border-right: 37px solid transparent;
    border-left: 37px solid transparent;
    position: absolute;
    z-index: -2;
    top: 125%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.statistical-data-people {
  text-align: center;
  position: relative;
  h2 {
    font-size: 40px;
    margin: 0;
    padding: 0;
  }
  i {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-210%);
    font-size: 30px;
  }
}

.c01BF5B {
  color: #01bf5b;
}
.b01BF5B {
  background-color: #01bf5b;
}
.c0076FB {
  color: #0076fb;
}
.b0076FB {
  background-color: #0076fb;
}
.c00BDB5 {
  color: #00bdb5;
}
.b00BDB5 {
  background-color: #00bdb5;
}
.cFFC01B {
  color: #ffc01b;
}
.bFFC01B {
  background-color: #ffc01b;
}
.cFF2044 {
  color: #ff2044;
}
.bFF2044 {
  background-color: #ff2044;
}
.c956AFF {
  color: #956aff;
}
.b956AFF {
  background-color: #956aff;
}


.footer {
  height: 100px;

  .footer-text {
    line-height: 100px;
    position: relative;

    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      //   background-color: red;
      position: absolute;
      top: 50%;
      left: -20px;
      transform: translate(-50%, -50%);
    }
  }
}
.zwsj {
  text-align: center;
}
</style>

